<template>
  <div class="goods-box">
    <div class="zhuanqv">
      <div class="nanzi" style="width: 48%">
        <img src="imgs/5.jpg" style="width: 99%" />
        <p>男子专区</p>
      </div>
      <div class="nvzi" style="width: 48%">
        <img src="imgs/6.jpg" style="width: 99%" />
        <p>女子专区</p>
      </div>
    </div>
    <h3>品牌分类</h3>
    <van-grid gutter="-0.18rem" :border="false">
      <van-grid-item><van-image src="imgs/7.jpg" /></van-grid-item>
      <van-grid-item><van-image src="imgs/8.jpg" /></van-grid-item>
      <van-grid-item><van-image src="imgs/9.jpg" /></van-grid-item>
      <van-grid-item><van-image src="imgs/10.jpg" /></van-grid-item>
      <van-grid-item><van-image src="imgs/11.jpg" /></van-grid-item>
      <van-grid-item><van-image src="imgs/12.jpg" /></van-grid-item>
      <van-grid-item><van-image src="imgs/13.jpg" /></van-grid-item>
      <van-grid-item><van-image src="imgs/14.jpg" /></van-grid-item>
    </van-grid>
    <div class="nvzi1">
      <div>
        <img src="imgs/15.jpg" alt="" />
        <p>Nike女子休闲梭织外套</p>
        <p>￥799</p>
      </div>
      <div>
        <img src="imgs/16.jpg" alt="" />
        <p>Nike女子休闲针织外套</p>
        <p>￥999</p>
      </div>
      <div>
        <img src="imgs/17.jpg" alt="" />
        <p>Nike女子休闲套头衫</p>
        <p>￥499</p>
      </div>
    </div>
    <img src="imgs/18.jpg" style="width: 100%" />
    <div class="fenlei">
      <div style="background-color: #c3ab6b">男子</div>
      <div style="background-color: #c39c7e">女子</div>
      <div style="background-color: #8e9ea9">儿童</div>
      <div style="background-color: #d2c5b6">配件</div>
    </div>
    <p class="fenleip">点击进入专题页</p>
    <div class="nvzi1" style="margin-top: 0.53rem">
      <div>
        <img src="imgs/19.jpg" alt="" />
        <p>Nike女子BLAZERMID 77</p>
        <p>￥849</p>
      </div>
      <div>
        <img src="imgs/20.jpg" alt="" />
        <p>Nike男子BLAZERMID 77 JUMBO</p>
        <p>￥899</p>
      </div>
      <div>
        <img src="imgs/21.jpg" alt="" />
        <p>Nike男子COURTLEGACY CNVS...</p>
        <p>￥499</p>
      </div>
    </div>
    <div class="nvzi1">
      <div>
        <img src="imgs/22.jpg" alt="" />
        <p>Nike男子休闲套头衫</p>
        <p>￥549</p>
      </div>
      <div>
        <img src="imgs/23.jpg" alt="" />
        <p>Nike男子休闲针织外套</p>
        <p>￥699</p>
      </div>
      <div>
        <img src="imgs/24.jpg" alt="" />
        <p>Nike男子休闲针织外套</p>
        <p>￥699</p>
      </div>
    </div>
    <img src="imgs/25.jpg" style="width: 100%; margin-top: 0.35rem" />
    <div class="nvzi1">
      <div>
        <img src="imgs/26.jpg" alt="" />
        <p>Adidas Originals中性SUPERSTAR</p>
        <p>￥1099</p>
      </div>
      <div>
        <img src="imgs/27.jpg" alt="" />
        <p>Adidas Originals女子FORUM</p>
        <p>￥999</p>
      </div>
      <div>
        <img src="imgs/28.jpg" alt="" />
        <p>SUPERSTAR W</p>
        <p>￥899</p>
      </div>
    </div>
    <img src="imgs/29.jpg" style="width: 100%; margin-top: 0.2rem" />
    <img src="imgs/30.jpg" style="width: 100%; margin-top: 0.04rem" />
    <div class="nvzi1">
      <div>
        <img src="imgs/31.jpg" alt="" />
        <p>Nike女子AIRJORDAN 1 MID...</p>
        <p>￥999</p>
      </div>
      <div>
        <img src="imgs/32.jpg" alt="" />
        <p>Nike男子AIRJORDAN LEGA...</p>
        <p>￥1099</p>
      </div>
      <div>
        <img src="imgs/33.jpg" alt="" />
        <p>Nike男子AIRJORDAN LEGA...</p>
        <p>￥1099</p>
      </div>
    </div>
    <img src="imgs/34.jpg" style="width: 100%; margin-top: 0.14rem" />
    <ul class="goodss">
      <li v-for="(g, index) in goods" :key="index">
          <img :src="g.img" style="width: 100%;"/>
          <div>
          <p style="margin-top:.02rem;margin-left:.1rem">{{ g.name }}</p>
          <p style="margin-top:.2rem;margin-left:.1rem">￥{{ g.price }}</p></div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "goodsmendian",
  props:{
    type:String,
  },
  data() {
    return {
      goods:[]
    };
  },
  created(){
      axios({
        url:"/goods",
        method:"get"
      }).then((res)=>{
        this.goods = res.data;
      });
    },
};
</script>

<style scoped>
.goodss{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.goodss li{
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}
.fenlei {
  display: flex;
  justify-content: center;
  margin-top: 0.31rem;
}
.fenlei div {
  width: 0.77rem;
  height: 0.77rem;
  border-radius: 0.2rem;
  font-size: 0.25rem;
  font-weight: 600;
  text-align: center;
  line-height: 0.87rem;
  margin-right: 0.1rem;
}
.fenleip {
  font-size: 0.1rem;
  font-weight: 400;
  margin-left: 2.9rem;
  margin-top: -0.2rem;
}
.nvzi1 {
  display: flex;
  justify-content: space-between;
}
.nvzi1 div {
  width: 32%;
  display: flex;
  flex-wrap: wrap;
}
.nvzi1 div img {
  width: 98%;
}
.nvzi1 div p {
  margin-top: 0.09rem;
}
.zhuanqv {
  display: flex;
  justify-content: space-around;
}
.goods-box h3 {
  padding-top: 0.31rem;
  padding-left: 0.43rem;
}
</style>
